<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video autoplay controls></video>
    <!-- <script>
      "use strict";

      // Put variables in global scope to make them available to the browser console.
      var video = document.querySelector("video");
      var constraints = (window.constraints = {
        audio: false,
        video: true,
      });
      var errorElement = document.querySelector("#errorMsg");

      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function (stream) {
          var videoTracks = stream.getVideoTracks();
          console.log("Got stream with constraints:", constraints);
          console.log("Using video device: " + videoTracks[0].label);
          stream.onremovetrack = function () {
            console.log("Stream ended");
          };
          window.stream = stream; // make variable available to browser console
          video.srcObject = stream;
        })
        .catch(function (error) {
          if (error.name === "ConstraintNotSatisfiedError") {
            errorMsg(
              "The resolution " +
                constraints.video.width.exact +
                "x" +
                constraints.video.height.exact +
                " px is not supported by your device."
            );
          } else if (error.name === "PermissionDeniedError") {
            errorMsg(
              "Permissions have not been granted to use your camera and " +
                "microphone, you need to allow the page access to your devices in " +
                "order for the demo to work."
            );
          }
          errorMsg("getUserMedia error: " + error.name, error);
        });

      function errorMsg(msg, error) {
        errorElement.innerHTML += "<p>" + msg + "</p>";
        if (typeof error !== "undefined") {
          console.error(error);
        }
      }
    </script> -->

    <script>
      "use strict";

      // Put variables in global scope to make them available to the browser console.
      var video = document.querySelector("video");

      navigator.mediaDevices
        .getUserMedia({
          audio: false,
          video: true,
        })
        .then(function (stream) {
          video.srcObject = stream;
        });
    </script>

    <!-- WebSocket -->
  </body>
</html>
